<template>
    <div class="rank">
        <div class="info">
            <img :src="rankInfo.picUrl" alt=""/>
            <span>{{rankInfo.title}}</span>
            <span>{{rankInfo.titleDetail}}</span>
            <span>更新时间：{{updataTime}}</span>
        </div>
        <div class="list">
            <ul>
                <li v-for="(item, id) in rankList" :key="item.id">
                    <span>{{id + 1}}.{{item.name}}</span>
                    <span>{{item.singerName}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import axios from 'axios'

export default {
    data(){
        return{
            rankList:[],
            rankInfo:{},
            updataTime:"",
        };
    },
    created() {
        this.getData();
    },
    methods:{
        getData(){
            axios.get("/jsososo/top",{
                params:{
                    id:this.$route.params.id
                }
            })
            .then(res=>{
                console.log(res.data);
                this.rankList=res.data.data.list;
                this.rankInfo=res.data.data.info;
                this.updataTime=res.data.data.update;
            }).catch(error=>{
                console.log(error)
            })
        }
    }
}
</script>

<style scoped>
.info img {
    width: 50%;
    border-radius: 1rem;
}
.info span{
    display: block;
}
.list li{
    text-align: left;
    margin: 1rem;
}
.list span{
    display: block;
}

</style>
